<template>
	<view class="news">
		<div class="news-list">
			
			<view class="list" v-if="dataList && dataList.length">
				<view class="list-item flex" v-for="(item, index) in dataList" :key="index" @click="jumpDetail(item)">
                    <view class="img">
                        <image class="img" v-if="item.title_type == 1" :src="hostUrl + item.title_val" mode="aspectFill"></image>
                    </view>
					<view class="title flex-between">
						{{ item.title_type == 1 ? '猜谜语' : item.title_val }}
                    </view>
					<image class="arrow" src="../../static/arrow.png"></image>
				</view>
			</view>
			

			<view class="loading-text" v-if="dataLoading && dataList.length">
				加载中
			</view>
			<block v-else>
				<view class="loading-text" v-if="dataList.length && hasMore == false">
					没有更多了
				</view>
			</block>
		</div>
		
		<view class="tabbar">
			<view class="active">答题</view>
			<view @click="jumpIndex">资讯</view>
		</view>
	</view>
</template>

<script>
import { requestUrl, appId } from '@/utils/config.js'
export default {
	data() {
		return {
			dataLoading: false,
			hasMore: null,
			params: {
				page: 1,
				pageSize: 10
			},
			dataList: [],
			hostUrl: requestUrl
		}
	},
	onShow() {
		uni.hideTabBar({
			animation: false
		})
	},
	onLoad(options){
		
		uni.request({
			url: this.hostUrl + 'api/get-config', //仅为示例，并非真实接口地址。
			method: 'get',
			header: {
				appid: appId,
			},
			success: (res) => {
				let { ad_status, name, ad_id } = res.data.data.data
				
				uni.setNavigationBarTitle({
			　　　　title: name //页面切换，更换页面标题
			　　})
			},
		})
		
		this.getList()
	},
	onPullDownRefresh() {
		this.params.page = 1
		this.getList()
	},
	methods: {
		
		scrollChange(e) {
			this.oldScrollTop = e.detail.scrollTop
		},

		async getList(){
			this.dataLoading = true
			tt.showLoading({title:'加载中'})
			let res = await uni.request({
				url: this.hostUrl + 'api/get-questions',
				method: 'GET',
				header: {
					appid: appId,
				},
				data: this.params
			})
			if(this.params.page == 1) this.dataList = []
			this.dataLoading = false
			uni.stopPullDownRefresh()
			tt.hideLoading()
			let resData = res.data.data
			if (resData.list.length) {
				this.hasMore = true
			} else {
				this.hasMore = false
			}
			this.dataList = [...resData.list, ...this.dataList]
		},

		// 跳转详情
		jumpDetail(item){
			uni.navigateTo({
				url: '/pages/index/index?data=' + JSON.stringify(item) 
			})
		},
		
		jumpIndex(){
			uni.switchTab({
				url: '/pages/news/index'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	view{
		display: block;
		flex-direction: inherit;
	}
    .news{
        width: 100vw;
		min-height: 100vh;
		background: #eee;
		
		.news-list{
			padding-bottom: 140rpx;
		}

		.list{
			padding: 10px;
		}
		.list-item{
		    border-radius: 16rpx;
		    margin-bottom: 24rpx;
			background: #fff;
			padding: 10px;
			border-radius: 16rpx;
			display: flex;
            align-items: center;
		    
		    .img{
		        width: 160rpx;
		        height: 160rpx;
		        border-radius: 16rpx;
				background: #f1f1f1;
		
		        image{
		            width: 160rpx;
		            height: 160rpx;
		        }
		    }
		
		    .title{
                padding: 0 20rpx;
                flex: 1;
                font-size: 32rpx;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
            }
			
			.arrow{
				width: 40rpx;
				height: 40rpx;
			}
		}
    }
	
	.loading-text{
		padding: 20rpx;
		text-align: center;
		font-size: 24rpx;
		color: rgba(0,0,0,0.4);
	}
	
	.tabbar{
		display: flex;
		align-items: center;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		 
		view{
			line-height: 100rpx;
			padding-bottom: 20rpx;
			flex: 1;
			text-align: center;
			
			&.active{
				color: #007AFF;
			}
		}
	}
</style>